<template>
    <form class="form-inline" @submit.prevent="onFormSubmit">
        <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <div class="input-group-text">任务</div>
            </div>
            <input type="text" class="form-control" placeholder="请填写任务信息" style="width:350px" v-model.trim="taskName">
        </div>
        <button type="submit" class="btn btn-success mb-2" @click="add">添加新任务</button>
    </form>
</template>

<script>
export default {
    name: "todoInput",
    data() {
        return {
            // 新任务的名称
            taskName: ""
        }
    },
    emits: ["addNew"],
    methods: {
        onFormSubmit() {
            // 判断是否为空
            if (!this.taskName) return alert("任务名称不能为空");
            // 数据传输
            this.$emit("addNew", this.taskName);
            // 清空数据
            this.taskName = "";
        }
    },
}
</script>

<style>
</style>